<template>
  <div>
    <el-dialog
      :title="$t('message.zxksm')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowModal"
      width="600px"
      @close="closeDrawer"
    >
      <el-form ref="form" :model="param" :rules="rules" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.yhxx')" prop="memberId">
          <div>
            <MemberSearch ref="memberSearchRef" @clear="MemberClear" @select="MemberSelect" />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.zxk')" prop="specialCardId">
          <el-select v-model="param.specialCardId" filterable style="width: 100%" @change="getspecialCardDetail">
            <el-option v-for="item in specialCardList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="specialCardInfo && specialCardInfo.id">
          <div class="cardInfo_wrap">
            <div class="item">
              <span>{{ $t('message.xsjg') }}：</span>
              <span class="red">{{ $t('message.rmbfh') }}{{ specialCardInfo.price }}</span>
            </div>
            <div class="item">
              <span>{{ $t('message.xsqk') }}：</span>
              <span style="color: #e89f42">{{ specialCardInfo.sellNum || "0" }}
                <span v-if="!specialCardInfo.circulationAll">{{ $t('message.zhan') }}</span></span>
              <span>/{{ specialCardInfo.circulationAll || $t('message.bx') }}</span>
              <span v-if="specialCardInfo.circulationAll">{{ $t('message.zhan') }}</span>
            </div>
            <div class="item">
              <span>{{ $t('message.knbj') }}：</span>
              <span class="primaryColor">{{ specialCardInfo.cardPrice }}{{ $t('message.yuan') }}</span>
              <span>，{{ $t('message.yxq') }}{{
                specialCardInfo.validTimeType == "1"
                  ? $t('message.cqyx')
                  : `${specialCardInfo.validTime}` + $t('message.tian')
              }}</span>
            </div>
            <div class="item">
              <span>{{ $t('message.zsje') }}：</span>
              <span>{{
                specialCardInfo.isGive == "0"
                  ? $t('message.bzs')
                  : $t('message.jine') + specialCardInfo.givePrice + $t('message.yuan') + '，' + $t('message.yxq') +
                    specialCardInfo.givePriceValidTime + $t('message.tian')
              }}</span>
            </div>
            <div class="item">
              <span>{{ $t('message.sycj') }}：</span>
              <span>{{ specialCardInfo.useOrderTypeName }}</span>
            </div>
            <div class="red item">{{ $t('message.xxsycjxjzxkxq') }}</div>
          </div>
        </el-form-item>
        <el-form-item v-if="isShowIndate == 1" :label="$t('message.qssj')" prop="validStartTime">
          <el-date-picker v-model="param.validStartTime" value-format="yyyy-MM-dd" type="date" style="width: 100%;" :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item :label="$t('message.gmsl')" prop="num">
          <el-input-number v-model="param.num" :min="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDrawer2">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr')
        }}</el-button>
      </div>
    </el-dialog>
    <orderDialog
      v-if="isShowOrder"
      ref="orderRef"
      @studentAddSuccess="isShowModal = false"
      @orderSuccess="orderSuccess"
      @openSuccess="subLoading = false"
    />
  </div>
</template>

<script>
import MemberSearch from '@/components/MemberSearch'
import orderDialog from '@/components/order'
import { pickerOptionsDis } from '@/utils/config'
import { specialCardSaleList, specialCardBuy, specialCardIndateF } from '@/api'
import dayjs from 'dayjs'
export default {
  components: {
    MemberSearch,
    orderDialog
  },
  data() {
    return {
      isShowIndate: 0,
      pickerOptions: pickerOptionsDis,
      subLoading: false,
      isShowModal: false,
      isShowOrder: false,
      modalDialog: this.$store.getters.dialog,
      rules: {
        num: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        memberId: [{ required: true, message: this.$t('message.qxz') + this.$t('message.hy'), trigger: 'change' }],
        specialCardId: [{ required: true, message: this.$t('message.qxz') + this.$t('message.zxk'), trigger: 'change' }]
      },
      param: {
        num: 1
      },
      specialCardList: [],
      specialCardInfo: {}

    }
  },
  created() {
    this.getspecialCardSaleList()
  },
  methods: {
    getspecialCardIndate() {
      const { param } = this
      specialCardIndateF({
        param: {
          id: param.specialCardId, memberId: param.memberId
        }
      }).then(res => {
        this.isShowIndate = res.record.isShow
        if (this.isShowIndate == 1) {
          this.$set(this.param, 'validStartTime', dayjs().format('YYYY-MM-DD'))
        }
      })
    },
    onSubmit() {
      const { param } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          specialCardBuy({ param }).then(res => {
            if (res.errorCode !== '000000') return
            this.isShowOrder = true
            this.$nextTick(() => {
              this.subLoading = true
              try {
                this.$refs.orderRef.continuePay({ ...param, ...res.record }, 'specialCardBuy')
              } catch (error) {
                this.subLoading = false
              }
              setTimeout(() => {
                this.subLoading = false
              }, 3000)
            })
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    getspecialCardSaleList() {
      specialCardSaleList({ param: {}}).then(res => {
        this.specialCardList = res.recordList
      })
    },
    orderSuccess() {
      this.closeDrawer()
      this.isShowOrder = false
    },
    getspecialCardDetail(id) {
      specialCardSaleList({ param: { id, memberId: this.param.memberId }}).then(res => {
        this.specialCardInfo = res.record
        if (this.param.memberId) {
          this.getspecialCardIndate()
        }
      })
    },
    closeDrawer() {
      this.isShowModal = false
      this.param = {
        num: 1
      }
      this.specialCardInfo = {}
      this.$refs['form'].clearValidate()
      this.$refs.memberSearchRef.clear()
      // this.$emit('close')
    },
    closeDrawer2() {
      this.isShowModal = false
      this.$emit('close')
    },
    MemberSelect(item) {
      const fn = () => {
        this.$set(this.param, 'memberId', item.id)
        if (this.param.specialCardId) {
          this.getspecialCardDetail(this.param.specialCardId)
          this.getspecialCardIndate()
        }
        this.$refs.form.clearValidate()
        // this.$set(this.param, 'specialCardId', '')
        // this.specialCardInfo = {}
        this.getspecialCardSaleList()
      }
      fn()
    },
    MemberClear() {
      this.$set(this.param, 'memberId', '')
      this.$set(this.param, 'specialCardId', '')
      this.specialCardInfo = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.cardInfo_wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border-radius: 8px;

  .item {
    width: 100%;
    line-height: 28px;
  }
}
</style>
